<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Statistic</a></li>
        <li>Chart widgets</li>
    </ul>        
</div>

<div class="content">
    <div class="row-fluid">
        <div class="span12">
            
            <div class="middle">
                <div class="epc">
                    <div class="epc-green" data-percent="56"><span>56</span>%</div>
                    <div class="label label-success">Server load</div>
                </div>
                <div class="epc">
                    <div class="epc-orange" data-percent="20"><span>128</span>MB</div>
                    <div class="label label-warning">Used RAM</div>
                </div>                        
                <div class="epc">
                    <div class="epc-red" data-percent="78"><span>481</span>GB</div>
                    <div class="label label-important">Disk</div>
                </div>                                                
            </div>
                            
        </div>
    </div>          
    <div class="row-fluid">
        <div class="span12">
            
            <div class="dr"><span></span></div>
            
            <div class="middle">
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="100" value="5" data-width="90" data-height="90" data-fgColor="#3f506a" data-bgColor="#f7f8fa"/>
                    <div class="label label-info">Blue</div>
                </div>                                        
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="100" value="5" data-width="90" data-height="90" data-fgColor="#b84b48" data-bgColor="#f7f8fa"/>
                    <div class="label label-important">Red</div>
                </div>                    
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="1024" value="50" data-width="90" data-height="90" data-fgColor="#f89406" data-bgColor="#f7f8fa"/>
                    <div class="label label-warning">Orange</div>
                </div> 
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="1024" value="150" data-width="90" data-height="90" data-fgColor="#468946" data-bgColor="#f7f8fa"/>
                    <div class="label label-success">Green</div>
                </div>                                         
            </div>                
            
            <div class="middle">
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="100" value="80" data-width="90" data-height="90" data-fgColor="#3f506a" data-bgColor="#f7f8fa" data-angleOffset="-125" data-angleArc="250"/>
                    <div class="label label-info">Blue</div>
                </div>                                        
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="100" value="65" data-width="90" data-height="90" data-fgColor="#b84b48" data-bgColor="#f7f8fa" data-angleOffset="-125" data-angleArc="250"/>
                    <div class="label label-important">Red</div>
                </div>                    
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="1024" value="50" data-width="90" data-height="90" data-fgColor="#f89406" data-bgColor="#f7f8fa" data-angleOffset="-125" data-angleArc="250"/>
                    <div class="label label-warning">Orange</div>
                </div> 
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="1024" value="150" data-width="90" data-height="90" data-fgColor="#468946" data-bgColor="#f7f8fa" data-angleOffset="-125" data-angleArc="250"/>
                    <div class="label label-success">Green</div>
                </div>                                         
            </div>                
            
            <div class="middle">
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="100" value="85" data-width="90" data-height="90" data-fgColor="#3f506a" data-readOnly="true" data-bgColor="#f7f8fa"/>
                    <div class="label label-info">Disabled</div>
                </div>                                        
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="100" value="85" data-width="90" data-height="90" data-fgColor="#b84b48" data-readOnly="true" data-bgColor="#f7f8fa"/>
                    <div class="label label-important">Disabled</div>
                </div>                    
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="1024" value="256" data-width="90" data-height="90" data-fgColor="#f89406" data-readOnly="true" data-bgColor="#f7f8fa"/>
                    <div class="label label-warning">Disabled</div>
                </div> 
                <div class="kchart">
                    <input type="text" class="knob" data-min="1" data-max="1024" value="756" data-width="90" data-height="90" data-fgColor="#468946" data-readOnly="true" data-bgColor="#f7f8fa"/>
                    <div class="label label-success">Disabled</div>
                </div>                     
            </div>                
            
            <div class="dr"><span></span></div>
            
        </div>
    </div>
    
    <div class="row-fluid">
        <div class="span12"> 
            <div class="middle">

                <div class="informer">
                    <a href="#">
                        <span class="title">98%</span>
                        <span class="text">Simple text</span>
                    </a>
                </div>                
                <div class="informer">
                    <a href="#">
                        <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkLineColor="#3f506a" sparkFillColor="#f7f8fa">1:3,2:4,3:3,3:4,4:2</span>
                        <span class="text">Line chart</span>
                    </a>
                </div>                
                <div class="informer">
                    <a href="#">
                        <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="bar" sparkBarColor="#b84b48">5,6,4,6,5,4,5,6,8,5,6</span>
                        <span class="text">Bar chart</span>
                    </a>
                </div>                
                <div class="informer">
                    <a href="#">
                        <span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="discrete" sparkLineColor="#3f506a">5,6,4,6,5,4,5,6,8,5,6</span>
                        <span class="text">Discrete chart</span>
                    </a>
                </div>                
                <div class="informer">
                    <a href="#">
                        <span class="mChartBar" sparkType="pie" sparkWidth="30" sparkHeight="30">5,2,3,2,1</span>
                        <span class="text">Pie chart</span>
                    </a>
                </div>                                    
            </div>                 
            <div class="middle">              
                <div class="informer">
                    <a href="#">
                        <span class="title">100%</span>                            
                        <div class="progress small progress-info">
                            <div class="bar tip" style="width: 100%;" data-original-title="100%"></div>
                        </div>                                                            
                    </a>
                </div>
                <div class="informer">
                    <a href="#">
                        <span class="title">20/40</span>                            
                        <div class="progress small progress-success">
                            <div class="bar tip" style="width: 50%;" data-original-title="50%"></div>
                        </div>                                                            
                    </a>
                </div>                      
                <div class="informer">
                    <a href="#">
                        <span class="title">Uploading</span>                            
                        <div class="progress small progress-warning">
                            <div class="bar tip" style="width: 85%;" data-original-title="85%"></div>
                        </div>                                                            
                    </a>
                </div>                      
                <div class="informer">
                    <a href="#">
                        <span class="title">25%</span>                            
                        <div class="progress small progress-danger">
                            <div class="bar tip" style="width: 25%;" data-original-title="25%"></div>
                        </div>                                                            
                    </a>
                </div>                                        
            </div>   
            
        </div>        
    </div>        
    
    <div class="row-fluid">
        <div class="span12">
            
            <div class="widget">
                
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span3">Line Charts</div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkLineColor="#3f506a" sparkFillColor="#f7f8fa">1:3,2:4,3:3,3:4,4:2</span></div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkLineColor="#b84b48" sparkFillColor="#f7f8fa">1:3,2:4,3:3,3:4,4:2</span></div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkLineColor="#f89406" sparkFillColor="#f7f8fa">1:3,2:4,3:3,3:4,4:2</span></div>                            
                    </div>
                </div>
                
            </div>

            <div class="widget">
                
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span3">Bar Charts</div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="bar" sparkBarColor="#3f506a">5,6,4,6,5,4,5,6,8,5,6</span></div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="bar" sparkBarColor="#b84b48">5,6,4,6,5,4,5,6,8,5,6</span></div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="bar" sparkBarColor="#f89406">5,6,4,6,5,4,5,6,8,5,6</span></div>                            
                    </div>
                </div>
                
            </div>                
            

            <div class="widget">
                
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span3">Discrete Charts</div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="discrete" sparkLineColor="#3f506a">5,6,4,6,5,4,5,6,8,5,6</span></div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="discrete" sparkLineColor="#b84b48">5,6,4,6,5,4,5,6,8,5,6</span></div>
                        <div class="span3"><span class="mChartBar" sparkWidth="100" sparkHeight="30" sparkType="discrete" sparkLineColor="#f89406">5,6,4,6,5,4,5,6,8,5,6</span></div>                            
                    </div>
                </div>
                
            </div>                   

            <div class="widget">
                
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span3">Other</div>
                        <div class="span3"><span class="mChartBar" sparkType="pie" sparkWidth="30" sparkHeight="30">5,2,3,2,1</span></div>
                        <div class="span3"><span class="mChartBar" sparkType="box" sparkWidth="100" sparkHeight="30">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span></div>
                        <div class="span3"><span class="mChartBar" sparkType="bullet" sparkWidth="100" sparkHeight="30" sparkPerformanceColor="#3f506a" sparkTargetColor="#b84b48">10,12,12,9,7</span></div>
                    </div>
                </div>
                
            </div>                                   
            
        </div>
    </div>
</div>  
